import React, { Component } from 'react';
import {
  Card,
  Button,
  Row,
  Col,
  Icon,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
  Input,
  Divider,
  Switch,
  Carousel,
  Popconfirm,
} from 'antd';
import { connect } from 'dva';
const { MonthPicker, RangePicker } = DatePicker;
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import numeral from 'numeral';
import { formatMessage, FormattedMessage } from 'umi/locale';
import moment from 'moment';

// import { Link } from 'react-router-dom';

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const { Search, TextArea } = Input;

import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from '@/components/Charts';

const { Meta } = Card;

import Trend from '@/components/Trend';
import styles from './RepairsList.less';

import { getValueWithLocalStorage } from '@/utils/authority';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

const namespace = 'RepairsList';
const userInfo = getValueWithLocalStorage('userinfo');
import router from 'umi/router';
import shopInfo from "../../../utils/LoginUserUtil";

import config from '../../../../config/web.config'

const mapStateToProps = state => {
  const repairList = state[namespace].repairList;
  const total = state[namespace].total;
  const isLoading = state[namespace].isLoading;

  return {
    repairList,
    total,
    isLoading,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getRepairsList: (_state, _page, _pagesize, _insertTime, _owner,_key) => {
      const action = {
        type: `${namespace}/getRepairsList`,
        payload: {
          key:_key,
          state: _state,
          page: _page,
          pagesize: _pagesize,
          insertTime: _insertTime,
          owner: _owner,
        },
      };
      dispatch(action);
    },

    updateCloseTipState: (_state, _page, _pagesize, _insertTime, _owner,_key,_isclose,_id) => {
      const action = {
        type: `${namespace}/updateCloseTipState`,
        payload: {
          key:_key,
          state: _state,
          page: _page,
          pagesize: _pagesize,
          insertTime: _insertTime,
          owner: _owner,
          id:_id,
          isclose: _isclose,
        },
      };
      dispatch(action);
    },

    delRepair: (_state, _page, _pagesize, _insertTime, _owner,_key,_id) => {
      const action = {
        type: `${namespace}/delRepair`,
        payload: {
          key:_key,
          state: _state,
          page: _page,
          pagesize: _pagesize,
          insertTime: _insertTime,
          owner: _owner,
          id:_id,
        },
      };
      dispatch(action);
    },
  };
};

@connect(
  mapStateToProps,
  mapDispatchToProps
)
export default class RepairsList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      state: '-1', //维修状态:0维修中 1待结账 2已完成 3已取消
      page: '0',
      pagesize: '20',
      insertTime: moment().format('YYYY-MM-DD HH:mm:ss'),
      owner: userInfo.tel,
      key:'',
    };
  }

  componentDidMount() {
    config.loadlCNZZ()
    this.reloadData();
  }

  reloadData = () => {
    this.props.getRepairsList(
      this.state.state,
      this.state.page,
      this.state.pagesize,
      this.state.insertTime,
      this.state.owner,
      this.state.key
    );
  };

  render() {
    const spna1 = 10
    const spna2 = 13
    const gutter = 1
    const columns = [
      {
        title: '车牌号',
        dataIndex: 'carcode',
        key: 'carcode',
        width:120,
        fixed: 'left'
      },
      {
        title: '接车事项',
        dataIndex: 'jcsx',
        key: 'jcsx',
        width:400,
        render: (text, record) => (
          <div className={styles.jcsxRow} >
            <Row  className={styles.itemLabel2}gutter={gutter}>
            <Col  span={spna1}>
              <span >入店时间</span>
            </Col>
              <span>{record.entershoptime}</span>
            </Row>
            <Row className={styles.itemLabel2} gutter={gutter}>
              <Col span={spna1}>
                <span>{record.state === '2'?'实际提车时间':'预计提车时间'}</span>
              </Col>
              <Col span={spna2}>
                <span>{record.wantedcompletedtime}</span>
              </Col>
            </Row>

            <Row  className={styles.itemLabel2}gutter={gutter}>
              <Col span={spna1}>
                <span >入店里程</span>
              </Col>
              <Col span={spna2}>
                <span>{record.totalkm}</span>
              </Col>
            </Row>
            <Row className={styles.itemLabel2} gutter={gutter}>
              <Col span={spna1}>
                <span >入店油量</span>
              </Col>
              <Col span={spna2}>
                <span>{record.oilvolume}</span>
              </Col>
            </Row>

          </div>
        ),
      },
      {
        title: '检车问题',
        dataIndex: 'problem',
        key: 'problem',
        width:400,
        render: (text, record) => (
          <div className={styles.jcwtRow} >
            <Row className={styles.itemLabel2} gutter={gutter}>
              <Col span={spna1}>
                <span>维修内容</span>
              </Col>
              <Col span={spna2}>
                <span className={styles.colContent}>{record.repairtype}</span>
              </Col>
            </Row>
            <Row className={styles.itemLabel2} gutter={gutter}>
              <Col span={spna1}>
                <span>维修备注</span>
              </Col>
              <Col span={spna2}>
                <span>{record.addition}</span>
              </Col>
            </Row>
            <Row className={styles.itemLabel2} gutter={gutter}>
              <Col span={spna1}>
                <span>客户备注</span>
              </Col>
              <Col span={spna2}>
                <span>{record.customremark}</span>
              </Col>
            </Row>
            <Row className={styles.itemLabel2} gutter={gutter}>
              <Col span={spna1}>
                <span>{' '}</span>
              </Col>
              <Col span={spna2}>
                <span>{' '}</span>
              </Col>
            </Row>
            <Row className={styles.itemLabel2} gutter={gutter}>
              <Col span={spna1}>
                <span>{' '}</span>
              </Col>
              <Col span={spna2}>
                <span>{' '}</span>
              </Col>
            </Row>
          </div>
        ),
      },
      {
        title: '提醒事项',
        dataIndex: 'tip',
        key: 'tip',
        width:400,
        render: (text, record) => (
          <div className={styles.txsxRow} >
            <Row className={styles.itemLabel2} gutter={gutter}>
              <Col span={spna1}>
                <span>提醒周期(天)</span>
              </Col>
              <span>{record.circle}</span>
            </Row>
            <Row  className={styles.itemLabel2}gutter={gutter}>
              <Col span={spna1}>
                <span>下次保养里程</span>
              </Col>
              <Col span={spna2}>
                <span>{record.nexttipkm}</span>
              </Col>
            </Row>
            <Row className={styles.itemLabel2} gutter={gutter}>
              <Col span={spna1}>
                <span>客户备注</span>
              </Col>
              <Col span={spna2}>
                <span>{record.customremark}</span>
              </Col>
            </Row>
            <Row className={styles.itemLabel2} gutter={gutter}>
              <Col span={spna1}>
                <span>是否关闭提醒</span>
              </Col>
              <Col span={spna2}>
                <Switch checked={record.isclose =='0'} checkedChildren="开" unCheckedChildren="关"   onChange={(checked)=>{
                  this.props.updateCloseTipState(
                    this.state.state,
                    this.state.page,
                    this.state.pagesize,
                    this.state.insertTime,
                    this.state.owner,
                    this.state.key,
                    record.isclose,
                    record._id)
                }}/>
              </Col>
            </Row>
          </div>
        ),
      },
      {
        title: '收费明细',
        dataIndex: 'items',
        key: 'items',
        width:600,
        render: (text, record) => (
          <Card>
            { Object.prototype.toString.call(record.items) === '[object Array]'?record.items.map((item) => {
             return (<Row  gutter={5}>
               <Col span={9}>
                 <span className={styles.itemLabel}>{item.type}</span>
               </Col>
               <Col span={9}>
                 <span className={styles.itemLabel}>{'  ¥'+item.price+'  工时:¥'+(item.workhourpay.length==0?'0':item.workhourpay)}</span>
               </Col>
               <Col span={2}>
                 <span className={styles.itemLabel}>{'   x'+item.num}</span>
               </Col>
               <Col span={4}>
                 <span className={styles.itemLabel}>{'   ¥'+parseInt(item.num)*(parseInt(item.price)+parseInt(item.workhourpay.length==0?'0':item.workhourpay))}</span>
               </Col>
              </Row>)
            }):null
            }
        </Card>
        ),
      },
      {
        title: '实际收款',
        dataIndex: 'finalItems',
        key: 'finalItems',
        width:400,
        render: (text, record) => (
          <div className={styles.txsxRow} >
            <Row className={styles.itemLabel3} gutter={gutter}>
              <Col span={spna1}>
                <span>优惠金额</span>
              </Col>
              <span>{record.saleMoney}</span>
            </Row>
            <Row className={styles.itemLabel3} gutter={gutter}>
              <Col span={spna1}>
                <span>挂帐金额</span>
              </Col>
              <Col span={spna2}>
                <span>{record.ownnum}</span>
              </Col>
            </Row>
            <Row className={styles.itemLabel3} gutter={gutter}>
              <Col span={spna1}>
                <span>支付方式</span>
              </Col>
              <Col span={spna2}>
                <span>{parseInt(record.payType) == 0 ? '线下':(parseInt(record.payType) == 1?'会员卡':(parseInt(record.payType) == 2?'微信':'支付宝'))}</span>
              </Col>
            </Row>
          </div>
        ),
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        fixed: 'right',
        render: (text, record) => (
          <Route>
            <span>
              <a target="_blank" href={"/print/print?id="+record._id}>打印</a>
              {/*<Link to={{ pathname: '/repair/print', query: { id: record._id } }}>查看</Link>*/}
              <Divider type="vertical" />
                <Popconfirm
                  title="确认删除此工单?"
                  onConfirm={() => {
                    this.props.delRepair(
                      this.state.state,
                      this.state.page,
                      this.state.pagesize,
                      this.state.insertTime,
                      this.state.owner,
                      this.state.key,
                      record._id)
                  }}
                  okText="确认"
                  cancelText="取消"
                >
                <a href="#" className={styles.delBtnStyle}>
                  删除
                </a>
              </Popconfirm>
            </span>
          </Route>
        ),
      },
    ];

    const dateFormat = 'YYYY-MM-DD';

    var that = this;

    const extraContent = (
      <Card bordered={false}>
        <Row className={styles.typeRow} gutter={10}>
          <Col span={16}>
            <RadioGroup
              defaultValue={'-1'}
              onChange={e => {
                if (e.target.value == '-1') {
                } else if (e.target.value == '0') {
                } else if (e.target.value == '1') {
                } else if (e.target.value == '2') {
                } else if (e.target.value == '3') {
                } else if (e.target.value == '4') {
                }

                that.setState({ state: e.target.value }, () => {
                  that.reloadData();
                });
              }}
            >
              <RadioButton value="-1">全部</RadioButton>
              <RadioButton value="0">维修中</RadioButton>
              <RadioButton value="1">已修完</RadioButton>
              <RadioButton value="2">已提车</RadioButton>
              <RadioButton value="3">已取消</RadioButton>
              <RadioButton value="4">挂帐中</RadioButton>
            </RadioGroup>
          </Col>
          <Col span={8}>
            <Search className={styles.extraContentSearch}
                    placeholder="输入车牌号查询"
                    enterButton
                    all
                    onSearch={(v,e)=>{
                      that.setState({key:v},()=>{
                        that.reloadData()
                      })
                    }} />
          </Col>
        </Row>
      </Card>
    );

    return (
      <Card
        className={styles.listCard}
        bordered={false}
        title="工单列表"
        style={{ marginTop: 24 }}
        bodyStyle={{ padding: '0 0px 0px 0px' }}
        extra={extraContent}
      >
        {/*<div>*/}
        {/*<ReactToPrint*/}
        {/*trigger={() => <a href="#">打印</a>}*/}
        {/*content={() => this.componentRef}*/}
        {/*/>*/}
        {/*<RepairInfoToPrint ref={el => (this.componentRef = el)} />*/}
        {/*</div>*/}

        <Table
          columns={columns}
          // rowSelection={{
          //   onSelect: (record, selected, selectedRows, nativeEvent) => {
          //     alert(record + selected + selectedRows + nativeEvent);
          //   },
          // }}
          scroll={{ x: 1800 }}
          pagination={{
            current: Number(this.state.page) + 1,
            loading: this.props.isLoading,
            pageSize: Number(this.state.pagesize),
            showSizeChanger: true,
            showQuickJumper: true,
            pageSizeOptions: ['1', '5', '10', '20', '50'],
            total: this.props.total,
            onShowSizeChange: (current, size) => {
              that.setState({ pagesize: size, page: 0 }, () => {
                that.reloadData();
              });
            },
            onChange: (page, pageSize) => {
              that.setState({ page: page - 1 }, () => {
                that.reloadData();
              });
            },
            showTotal: total => `总计 ${total} 条`,
          }}
          dataSource={this.props.repairList}
        />
      </Card>
    );
  }
}
